<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>第34章 项目1-博客前端</title>
<script type="text/javascript" src="../tool.js"></script>
<script type="text/javascript" src="../base.js"></script>
<script type="text/javascript" src="../base_drag.js"></script>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>

<div id="header">
	<div class="logo"><img src="images/logo.gif" alt="" /></div>
	<div class="member">个人中心
		<ul class="member_ul">
			<li><a href="###">设置</a></li>
			<li><a href="###">换肤</a></li>
			<li><a href="###">帮助</a></li>
			<li><a href="###">退出</a></li>
		</ul>
	</div>
	<div class="login">登录</div>
</div>


<div id="login">
	<h2><img src="images/close.png" alt="" class="close" />网站登录</h2>
	<div class="user">帐 号：<input type="text" name="user" class="text" /></div>
	<div class="pass">密 码：<input type="password" name="pass" class="text" /></div>
	<div class="button"><input type="button" class="submit" value="" /></div>
	<div class="other">注册新用户 | 忘记密码？</div>
</div>


<div id="nav">
	<ul class="about">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ul class="black">
		<li>首页</li>
		<li>博文列表</li>
		<li>精彩相册</li>
		<li>动感音乐</li>
		<li>关于我</li>
	</ul>
	<div class="nav_bg">
		<ul class="white">
			<li>首页</li>
			<li>博文列表</li>
			<li>精彩相册</li>
			<li>动感音乐</li>
			<li>关于我</li>
		</ul>
	</div>	
</div>


<div id="share">
	<h2>分享到</h2>
	<ul>
		<li><a href="###" class="a">一键分享</a></li>
		<li><a href="###" class="b">新浪微博</a></li>
		<li><a href="###" class="c">人人网</a></li>
		<li><a href="###" class="d">百度相册</a></li>
		<li><a href="###" class="e">腾讯朋友</a></li>
		<li><a href="###" class="f">豆瓣网</a></li>
		<li><a href="###" class="g">百度新首页</a></li>
		<li><a href="###" class="h">和讯微博</a></li>
		<li><a href="###" class="i">QQ 空间</a></li>
		<li><a href="###" class="j">百度搜藏</a></li>
		<li><a href="###" class="k">腾讯微博</a></li>
		<li><a href="###" class="l">开心网</a></li>
		<li><a href="###" class="m">百度贴吧</a></li>
		<li><a href="###" class="n">搜狐微博</a></li>
		<li><a href="###" class="o">QQ 好友</a></li>
		<li><a href="###" class="p">更多...</a></li>
	</ul>
	<div class="share_footer"><a href="###">百度分享</a><span></span></div>
</div>

<div id="screen"></div>

<div id="test"></div>




</body>
<script>



$(function () {

	//个人中心
	$('#header .member').hover(function () {
		$(this).css('background', 'url(images/arrow2.png) no-repeat 55px center');
		$('#header .member_ul').show().animate({
			t : 30,
			step : 10,
			mul : {
				o : 100,
				h : 120
			}
		});
	}, function () {
		$(this).css('background', 'url(images/arrow.png) no-repeat 55px center');
		$('#header .member_ul').animate({
			t : 30,
			step : 10,
			mul : {
				o : 0,
				h : 0
			},
			fn : function () {
				$('#header .member_ul').hide();
			}
		});
	});
	
	//登录框
	var login = $('#login');
	var screen = $('#screen');
	login.center(350, 250).resize(function () {
		if (login.css('display') == 'block') {
			screen.lock();
		}
	});
	$('#header .login').click(function () {
		login.center(350, 250).css('display', 'block');
		screen.lock().animate({
			attr : 'o',
			target : 30,
			t : 30,
			step : 10
		});
	});
	$('#login .close').click(function () {
		login.css('display', 'none');
		//先执行渐变动画，动画完毕后再执行关闭unlock
		screen.animate({
			attr : 'o',
			target : 0,
			t : 30,
			step : 10,
			fn : function () {
				screen.unlock();
			}
		});
	});
	
	
	//拖拽
	login.drag($('#login h2').last());
	
	//百度分享初始化位置
	$('#share').css('top', getScroll().top + (getInner().height - parseInt(getStyle($('#share').first(), 'height'))) / 2 + 'px');
	

	addEvent(window, 'scroll', function () {
		$('#share').animate({
			attr : 'y',
			target : getScroll().top + (getInner().height - parseInt(getStyle($('#share').first(), 'height'))) / 2
		});
	});
	
	//百度分享收缩效果
	$('#share').hover(function () {
		$(this).animate({
			attr : 'x',
			target : 0
		});
	}, function () {
		$(this).animate({
			attr : 'x',
			target : -211
		});
	});
	
	//滑动导航
	$('#nav .about li').hover(function () {
		var target = $(this).first().offsetLeft;
		$('#nav .nav_bg').animate({
			attr : 'x',
			target : target + 20,
			t : 30,
			step : 10,
			fn : function () {
				$('#nav .white').animate({
					attr : 'x',
					target : -target
				});
			}
		});
	}, function () {
		$('#nav .nav_bg').animate({
			attr : 'x',
			target : 20,
			t : 30,
			step : 10,
			fn : function () {
				$('#nav .white').animate({
					attr : 'x',
					target : 0
				});
			}
		});
	});
	
});






</script>
</html>
